<div class="login-layout blur-login">
	<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<span class="red">CAFE</span>
									<span class="white" id="id-text2">CONTROL</span>
								</h1>
								<h4 class="blue" id="id-company-text">&copy; phuong101899</h4>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h1 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												SIGN IN
											</h1>

											<div class="space-6"></div>

											<form id="loginForm" ng-submit="login(formData)" name="loginForm">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" ng-model="formData.username" class="form-control" placeholder="Tài khoản" required/>
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input ng-model="formData.password" type="password" class="form-control" placeholder="Mật khẩu" required/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" ng-mode="formData.save" class="ace" />
															<span class="lbl"> Lưu thông tin</span>
														</label>

														<button type="submit" ng-disabled="loginForm.$invalid" class="width-35 pull-right btn btn-sm btn-primary">
															<span>Đăng nhập</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>
										</div><!-- /.widget-main -->

										<div class="toolbar clearfix">
											<div>
												<a href="javascript:void(0)" data-target="#forgot-box" class="forgot-password-link">
													<i class="ace-icon fa fa-arrow-left"></i>
													Tìm lại mật khẩu
												</a>
											</div>

											<div>
												<a href="javascript:void(0)" data-target="#signup-box" class="user-signup-link">
													Đăng kí
													<i class="ace-icon fa fa-arrow-right"></i>
												</a>
											</div>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

								<div id="forgot-box" class="forgot-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="ace-icon fa fa-key"></i>
												Retrieve Password
											</h4>

											<div class="space-6"></div>
											<p>
												Enter your email and to receive instructions
											</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="Email" />
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>

													<div class="clearfix">
														<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
															<i class="ace-icon fa fa-lightbulb-o"></i>
															<span class="bigger-110">Send Me!</span>
														</button>
													</div>
												</fieldset>
											</form>
										</div><!-- /.widget-main -->

										<div class="toolbar center">
											<a href="javascript:void(0)" data-target="#login-box" class="back-to-login-link">
												Trở lại
												<i class="ace-icon fa fa-arrow-right"></i>
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.forgot-box -->

								<div id="signup-box" class="signup-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="ace-icon fa fa-users blue"></i>
												Tạo tài khoản 
											</h4>

											<div class="space-6"></div>
											<form ng-submit="signup(formData)" novalidate name="signupForm">
												<fieldset>
													<div class="form-group" ng-class="{'has-error' : signupForm.email.$dirty && signupForm.email.$invalid,'has-success':signupForm.email.$dirty && signupForm.email.$valid}">
														<label class="block clearfix">
															<span class="red" ng-show="signupForm.email.$error.email">Email chưa đúng.</span>
															<span class="block input-icon input-icon-right">
																<input ng-model="formData.email" name="email" type="email" class="form-control" placeholder="Email" required/>
																<i class="ace-icon fa fa-envelope"></i>
															</span>
														</label>
													</div>
													
													<div class="form-group" ng-class="{'has-error' : signupForm.username.$dirty && signupForm.username.$invalid,'has-success':signupForm.username.$dirty && signupForm.username.$valid}">
														<label class="block clearfix">
															<span class="block input-icon input-icon-right">
																<input ng-model="formData.username" name="username" type="text" class="form-control" placeholder="Tài khoản" required/>
																<i class="ace-icon fa fa-user"></i>
															</span>
														</label>
													</div>
													
													<div class="form-group" ng-class="{'has-error' : signupForm.password.$dirty && signupForm.password.$invalid,'has-success':signupForm.password.$dirty && signupForm.password.$valid}">
														<label class="block clearfix">
															<span class="block input-icon input-icon-right">
																<input ng-model="formData.password" name="password" type="text" class="form-control" placeholder="Mật khẩu" required/>
																<i class="ace-icon fa fa-lock"></i>
															</span>
														</label>
													</div>													
													<label class="block">
														<input type="checkbox" class="ace" ng-model="term" />
														<span class="lbl">
															Tôi đồng ý
															<a href="javascript:void(0)">User Agreement</a>
														</span>
													</label>

													<div class="space-24"></div>

													<div class="clearfix">
														<button type="reset" class="width-30 pull-left btn btn-sm">
															<i class="ace-icon fa fa-refresh"></i>
															<span class="bigger-110">Reset</span>
														</button>

														<button ng-disabled="!term || signupForm.$invalid" type="submit" class="width-65 pull-right btn btn-sm btn-success">
															<span class="bigger-110">Đăng kí</span>

															<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="javascript:void(0)" data-target="#login-box" class="back-to-login-link">
												<i class="ace-icon fa fa-arrow-left"></i>
												Trở lại
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.signup-box -->
							</div><!-- /.position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$(document).on('click', '.toolbar a[data-target]', function(e) {
			e.preventDefault();
			var target = $(this).data('target');
			$('.widget-box.visible').removeClass('visible');//hide others
			$(target).addClass('visible');//show target
		});
	});
</script>